<template>
  <Modal  ref="productTypeModal" v-model="modal.show" v-bind="modal" @on-ok="save" @on-cancel="closeModal">
      <Form ref="formValidate" :model="formValidate"  :label-width="80" :rules="ruleValidate">
        <FormItem label="名称" prop="name">
            <Input id="formItemName" v-model="formValidate.name" placeholder="请输类型名称"></Input>
        </FormItem>
        <FormItem label="描述" prop="description">
            <Input type="textarea" id="formItemDesc" v-model="formValidate.description" placeholder="请输入描述信息"></Input>
        </FormItem>
      </Form>
    </div>
  </Modal>
</template>

<script>
import {addProductType,updateProductType} from './api/productType.js'
import { validateName } from '@/libs/reg'
export default {
  components: { },
  name:'addProductType',
  props:{
    title:{
      type:String,
      default:"产品类型"
    }
  },
  data(){
    return {
      modal:{
        show:false,
        loading:true,
        title:'创建产品类型',
        'mask-closable':false,
        closable:false
      },
      formValidate:{
        name:'',
        description:'',
      },
      ruleValidate:{
          name:[
            { required: true, message: '请输入类型名称', trigger: 'blur' },
            {type:'string',max: 64,trigger:'blur',message:'最多输入64个字符'},
            { validator:validateName, trigger: 'blur' }
          ],
          description: [
            {type:'string',max: 1000,trigger:'blur',message:'最多输入1000个字符'}
          ]
      }
    }
  },
  computed:{
    
  },
  mounted(){
   
  },
  methods:{
    openModal(params,type){
      //表单作用域
      this.modal.show = true;
      this.op = type;
      this.opTxt = type === 'update' ? '修改' : '创建';
      this.modal.title = `${this.opTxt}${this.title}`;
      if(type == 'update'){
        this.formValidate = {...params};
        this.logoList = [{
          path: params.logo
        }];
      }else{
        this.initData();
        if(params && params.id){
          this.formValidate.parentId = params.id
        }
      }
    },
    save() {
      this.$refs.formValidate
        .validate((valid) => {
          if (valid) {
            let params = {
              ...this.formValidate
            };
            let reqApi = this.op === 'update' ? updateProductType : addProductType;
            //修改任务
            reqApi(params)
              .then(({ code, data, message }) => {
                if (code == 1) {
                  this.$Message.info(this.modal.title + '成功');
                  this.closeModal();
                  this.$emit('ok', this.op);
                } else {
                  this.$Message.error(message);
                }
              })
              .catch((e) => {
                this.$Message.error(this.modal.title + '失败');
              })
              .finally(() => {
                this.cancelLoading();
              });
          } else {
            this.cancelLoading();
          }
        })
        .catch((error) => {
          this.cancelLoading();
        });
    },
    closeModal() {
      this.modal.show = false;
      this.$emit('close');
      this.resetField();
    },
    cancelLoading() {
      this.modal.loading = false;
      setTimeout(() => {
        this.modal.loading = true;
      });
    },
    initData() {
      this.formValidate = { ...this._formValidate };
    },
    resetField() {
      this.initData();
      this.$refs.formValidate.resetFields();
    }
  }
}
</script>

<style>

</style>